<template>
  <div id="select-area" :style="Style" @click="choiceImg">
    <div class="label label-info pull-right">{{say}}</div>
    <div class="select-area" >
      <img :src="imgSrc"  @error="onerror">
    </div>
    <input type="file" :name="fieldname" ref="filElem" @change="getFile" style="display: none" accept="image/*">
    <div class="minifont tip"><slot  name="tip"></slot></div>
  </div>
</template>
<script type="text/javascript">
module.exports={
  props:{
    fieldname:{
      type:String,
      default:'img'
    },
    width:{
      type:String,
      default:'3.333rem'
    },
    height:{
      type:String,
      default:'3.333rem'
    }
  },
  data(){
    return {
      imgSrc:'',
      imgInfo:{},
      say:''
    }
  },
  computed:{
    Style(){
      let _this = this
      return {
        width: _this.width,
        height: _this.height
      }
    }
  },
  methods:{
    onerror(e) {
      let _this=this
      e.target.src = _this.defaultImg
    },
    choiceImg(){
      this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
    },
    noticeParent(){
      this.$emit('imgchange',this.imgSrc)
    },
    getFile(){
      let that = this
      const inputFile = that.$refs.filElem.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(inputFile)
      reader.onload = function (e) {
        that.imgSrc = this.result
        that.noticeParent()
      }
    }
  }
}
</script>
<style type="text/css" scoped>
#select-area{position: relative}
.select-area{
  text-align: center;
  color: #fff;vertical-align: center;font-size: 1rem;
  background-color: #fff;height:auto;;
  /*background-image:url(/topartMinProgram-2/libs/imgs/local/plus.png);*/
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: center;
}
img{
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.tip{position: absolute;bottom:0;text-align: center;width: 100%;height: .5rem;line-height: .5rem;background: #8C8B8B;color: #ffffff}
</style>
